<template>
  <div class="shops-detail">
    <!-- <div class="path">
      <span>资产管理</span> / {{ $route.query.ownershipName }}/
      {{ propertyinfoStorage && propertyinfoStorage.propertyName }}
    </div> -->
    <div class="shops-detail-content">
      <div class="content-name" @click="backClick">
        <i class="el-icon-arrow-left"></i>
        <div class="name">
          <span class="line"></span>
          {{ baseInfo && baseInfo.leaseUserName }}
        </div>
      </div>
      <div class="content-info-top">
        <div style="display: flex; align-items: center">
          <div class="title">
            <img src="../../assets/images/asset-img1.png" />
            <p>租户基本信息</p>
          </div>
        </div>
        <div class="info-top-content">
          <div class="top-content-left">
            <div class="top-content-left-item">
              租户名称：<span>{{ baseInfo && baseInfo.leaseUserName }} </span>
            </div>
            <div class="top-content-left-item">
              租户类型：<span v-if="baseInfo && baseInfo.leaseUserType === 1"
                >企业/个体户</span
              >
              <span v-if="baseInfo && baseInfo.leaseUserType === 2">个人</span>
            </div>
            <div class="top-content-left-item">
              证件号：<span
                >{{ baseInfo && baseInfo.leaseUserIdentityCard }}
              </span>
            </div>
            <div class="top-content-left-item">
              联系方式：<span>{{ baseInfo && baseInfo.leaseUserPhone }} </span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-info-bottom">
        <div class="content-info-bottom-content">
          <div class="content-info-bottom-left">
            <div class="title">
              <img src="../../assets/images/asset-img1.png" />
              <p>租赁评估信息</p>
            </div>
            <div class="left-button" @click="addLeaseClick" v-if="permissions.includes('tenant:record:add:disabled')">
              <i class="el-icon-plus"></i>
              <span>添加租赁记录</span>
            </div>
          </div>
          <div class="left-button" style="width: 85px" @click="historyClick" v-if="permissions.includes('history:disabled')">
            <i class="el-icon-time"></i>
            <span>历史记录</span>
          </div>
        </div>
        <div v-if="leaseBaseInfoList && leaseBaseInfoList.length > 0">
          <div
            class="lease-info"
            v-for="(item, index) in leaseBaseInfoList"
            :key="index"
          >
            <div
              :class="[
                item.leaseNature === 1
                  ? 'info-bottom-content-tips'
                  : 'info-bottom-content-tips no-lease-active',
              ]"
            >
              <div class="info-bottom-content-time">
                签订日期：{{ item.leaseContractBeginDate }}
                <!-- 2023年3月12日 -->
              </div>
              <div class="info-bottom-content-opt">
                <div
                  :class="[item.leaseNature === 1 ? 'opt' : 'opt opt-active']"
                  @click="editLeaseClick(item)"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    icon="el-icon-edit"
                    v-if="permissions.includes('tenant:record:edit:disabled')"
                    >编辑</el-button
                  >
                </div>
                <div
                  :class="[item.leaseNature === 1 ? 'opt' : 'opt opt-active']"
                >
                  <el-popconfirm
                    title="是否删除当前租赁评估信息？"
                    @confirm="delLeaseClick(item)"
                    @onConfirm="delLeaseClick(item)"
                    v-if="permissions.includes('delete:lease:disabled')"
                  >
                    <el-button
                      slot="reference"
                      type="text"
                      size="small"
                      class="delete"
                      icon="el-icon-delete"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </div>
                <div
                  :class="[item.leaseNature === 1 ? 'opt' : 'opt opt-active']"
                >
                  <el-popover placement="bottom" width="230" trigger="click">
                    <div class="file">
                      <p class="expired-file" @click="expireClick(item, 1)">
                        到期归档
                      </p>
                      <p class="advance-file" @click="expireClick(item, 0)">
                        提前归档
                      </p>
                    </div>
                    <el-button
                      slot="reference"
                      type="text"
                      size="small"
                      icon="el-icon-s-finance"
                      @click="fileLeaseClick(item)"
                      v-if="permissions.includes('tenant:record:archive:disabled')"
                      >归档</el-button
                    >
                  </el-popover>
                </div>
              </div>
            </div>
            <div class="info-bottom-content">
              <div class="info-bottom-content-left">
                <div class="title">
                  <div class="info-title">租赁资产</div>
                  <div class="area">
                    <div
                      v-if="
                        item.leasePropertyList[0].propertyTypeCode !=
                        'property_type_gongyu'
                      "
                    >
                      总租赁面积：<span>{{ getTotalArea(item) || 0 }}㎡</span>
                    </div>

                    <div v-else>
                      租赁间数：<span>{{
                        item.leasePropertyList[0].usedNum || 0
                      }}</span
                      >间
                    </div>
                  </div>
                  <div class="line"></div>
                </div>

                <div class="leased-assets">
                  <div
                    class="leased-assets-item"
                    v-for="(v, index) in item.leasePropertyList"
                    :key="index"
                  >
                    <div class="assets-img">
                      <img
                        src="../../assets/images/operating-assets.png"
                        v-if="v.businessNature === 1"
                      />

                      <img
                        src="../../assets/images/non-operating-assets.png"
                        v-else-if="v.businessNature === 0"
                      />
                    </div>
                    <div class="leased-assets-item-title">
                      <p>{{ v.ownershipName }}</p>
                      <p>权属</p>
                    </div>
                    <div class="leased-assets-item-content">
                      <el-row style="padding-bottom: 15px">
                        <el-col :span="12"
                          >资产地块：<span>{{ v.propertyName }}</span></el-col
                        >
                        <el-col :span="12"
                          >所属社区：<span>{{
                            v.propertyCommunityName
                          }}</span></el-col
                        >
                      </el-row>
                      <el-row>
                        <el-col :span="8"
                          >资产类型：<span>{{
                            v.propertyTypeName
                          }}</span></el-col
                        >
                        <el-col
                          :span="8"
                          v-if="
                            v.propertyTypeCode === 'property_type_shangpu' ||
                            v.propertyTypeCode === 'property_type_bangong' ||
                            v.propertyTypeCode === 'property_type_zongheti' ||
                            v.propertyTypeCode ===
                              'property_type_gongyechangfang'
                          "
                          >门牌号：<span>{{ v.doorCode }}</span></el-col
                        >
                        <el-col :span="8" v-else
                          >栋号：<span>{{ v.dongCode }}</span></el-col
                        >

                        <el-col
                          :span="8"
                          v-if="
                            v.propertyTypeCode === 'property_type_shangpu' ||
                            v.propertyTypeCode === 'property_type_bangong' ||
                            v.propertyTypeCode === 'property_type_zongheti' ||
                            v.propertyTypeCode ===
                              'property_type_gongyechangfang'
                          "
                          >租赁面积：<span
                            >{{ v.leaseArea || 0 }}㎡</span
                          ></el-col
                        >

                        <el-col :span="8"
                          >租赁间数：<span>{{ v.usedNum || 0 }}间</span></el-col
                        >
                      </el-row>
                    </div>
                  </div>
                </div>
                <div class="jy-lease-info" v-if="item.leaseNature === 0">
                  <div class="title">
                    <div class="info-title">租赁信息</div>
                    <div class="line"></div>
                  </div>

                  <div class="no-lease">
                    <el-row>
                      <el-col :span="8">
                        <div class="info-left-item">
                          租赁性质：<span v-if="item.leaseNature === 1"
                            >经营性租赁</span
                          >
                          <span v-if="item.leaseNature === 0"
                            >非经营性租赁</span
                          >
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-left-item">
                          使用起始日期：{{ item.leaseContractBeginDate }}
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-left-item">
                          使用终止日期：{{ item.leaseContractEndDate }}
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <div class="info-left-item">
                          租赁协议：
                          <template
                            v-if="
                              item.leaseContractAttachList &&
                              item.leaseContractAttachList.length > 0
                            "
                          >
                            <span
                              style="
                                font-weight: 400;
                                color: #0052d9;
                                text-decoration: underline;
                                cursor: pointer;
                              "
                              @click="downloadClick(v.attUrl)"
                              v-for="(v, i) in item.leaseContractAttachList"
                              :key="i"
                              >{{ v.originalAttName }}</span
                            >
                          </template>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-left-item">
                          租赁说明：<span style="font-weight: 400">{{
                            item.leaseInstruction
                          }}</span>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <div class="info-left-item">
                          其他附件：
                          <template
                            v-if="
                              item.otherAttachList &&
                              item.otherAttachList.length > 0
                            "
                          >
                            <span
                              style="
                                font-weight: 400;
                                color: #0052d9;
                                text-decoration: underline;
                                cursor: pointer;
                              "
                              @click="downloadClick(v.attUrl)"
                              v-for="(v, i) in item.otherAttachList"
                              :key="i"
                              >{{ v.originalAttName }}</span
                            >
                          </template>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>

                <div class="jy-lease-info" v-if="item.leaseNature === 1">
                  <div class="title">
                    <div class="info-title">租赁信息</div>
                    <div class="line"></div>
                  </div>
                  <div class="info">
                    <div class="info-left">
                      <div class="info-left-item">
                        租赁性质：<span v-if="item.leaseNature === 1"
                          >经营性租赁</span
                        >
                        <span v-if="item.leaseNature === 0">非经营性租赁</span>
                      </div>
                      <div class="info-left-item">
                        租赁合同签订日期：{{ item.leaseContractBeginDate }}
                      </div>

                      <div class="info-left-item">
                        租赁合同终止日期：{{ item.leaseContractEndDate }}
                      </div>

                      <div class="info-left-item">
                        租赁协议：
                        <template
                          v-if="
                            item.leaseContractAttachList &&
                            item.leaseContractAttachList.length > 0
                          "
                        >
                          <span
                            style="
                              font-weight: 400;
                              color: #0052d9;
                              text-decoration: underline;
                              cursor: pointer;
                            "
                            @click="downloadClick(v.attUrl)"
                            v-for="(v, i) in item.leaseContractAttachList"
                            :key="i"
                            >{{ v.originalAttName }}</span
                          >
                        </template>
                      </div>

                      <!-- <div class="info-left-item">租赁用途：公益机构</div> -->
                    </div>
                    <div class="info-middle">
                      <div class="info-middle-table">
                        <p>租金缴纳：</p>
                        <el-table
                          :data="item.leaseRentList"
                          border
                          style="width: 100%"
                        >
                          <el-table-column
                            label="序号"
                            width="55"
                            align="center"
                          >
                            <template slot-scope="scope">{{
                              scope.$index + 1
                            }}</template>
                          </el-table-column>
                          <el-table-column
                            prop="rentAmount"
                            label="租金（万元/每年）"
                            align="center"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="rentFloating"
                            label="上浮（%） "
                            align="center"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="payRentDate"
                            label="租金到期日期"
                            align="center"
                          >
                          </el-table-column>
                          <el-table-column label="缴租情况" align="center">
                            <template slot-scope="scope">
                              <span v-if="scope.row.rentPayFlag === 1">是</span>
                              <span v-else-if="scope.row.rentPayFlag === 0"
                                >否</span
                              >
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="rentPayDate"
                            label="缴租日期"
                            align="center"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="payRentAmount"
                            label="实缴租金（万元）"
                            align="center"
                          >
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="update-btn">
                        <el-button
                          type="primary"
                          size="mini"
                          class="el-icon-edit"
                          @click="updateClick(item)"
                          v-if="permissions.includes('tenant:record:update:disabled')"
                          >更新</el-button
                        >
                      </div>
                    </div>

                    <div class="info-right">
                      <div class="info-left-item" style="margin-bottom: 25px">
                        <div class="info-left-table">
                          <p>押金情况：</p>
                          <el-table
                            :data="item.leaseDepositList"
                            border
                            style="width: 60%; margin-top: 10px"
                          >
                            <el-table-column
                              label="序号"
                              width="55"
                              align="center"
                            >
                              <template slot-scope="scope">{{
                                scope.$index + 1
                              }}</template>
                            </el-table-column>
                            <el-table-column
                              prop="payDepositDate"
                              label="押金缴纳日期"
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="depositAmount"
                              label="押金（万元）"
                              align="center"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                      <div class="info-left-item" style="margin-bottom: 25px">
                        租赁说明：<span style="font-weight: 400">{{
                          item.leaseInstruction
                        }}</span>
                      </div>
                      <div class="info-left-item">
                        其他附件：
                        <template
                          v-if="
                            item.otherAttachList &&
                            item.otherAttachList.length > 0
                          "
                        >
                          <span
                            style="
                              font-weight: 400;
                              color: #0052d9;
                              text-decoration: underline;
                              cursor: pointer;
                            "
                            @click="downloadClick(v.attUrl)"
                            v-for="(v, i) in item.otherAttachList"
                            :key="i"
                            >{{ v.originalAttName }}</span
                          >
                        </template>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="jy-assessment-info" v-if="item.leaseNature === 1">
                  <div class="title">
                    <div class="info-title">评估信息</div>
                    <div class="line"></div>
                  </div>
                  <div class="info">
                    <div class="info-left">
                      <el-row>
                        <el-col :span="8">
                          <div class="info-left-item">
                            评估报告日期：{{ item.assessReportDate }}
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="info-left-item">
                            评估价值时点：{{ item.assessValueDate }}
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="info-left-item">
                            评估价值金额：{{ item.assessValueAmount }}元/每月
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <div class="info-left-item">
                            评估报告：
                            <template
                              v-if="
                                item.assessReportAttachList &&
                                item.assessReportAttachList.length > 0
                              "
                            >
                              <span
                                style="
                                  font-weight: 400;
                                  color: #0052d9;
                                  text-decoration: underline;
                                  cursor: pointer;
                                "
                                @click="downloadClick(v.attUrl)"
                                v-for="(v, i) in item.assessReportAttachList"
                                :key="i"
                                >{{ v.originalAttName }}</span
                              >
                            </template>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="租金缴纳更新"
      :visible.sync="leaseUpdateDialogVisible"
      width="50%"
      center
    >
      <el-table :data="leaseRentUpdateList" border style="width: 100%">
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="rentAmount"
          label="租金（万元/每年）"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="rentFloating" label="上浮（%） " align="center">
        </el-table-column>
        <el-table-column prop="payRentDate" label="租金到期日期" align="center">
        </el-table-column>
        <el-table-column label="缴租情况" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.rentPayFlag" placeholder="请选择">
              <el-option
                v-for="item in leaseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="缴租日期" align="center" width="180">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.rentPayDate"
              type="date"
              placeholder="选择日期"
              style="width: 90%"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="实缴租金（万元）" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.payRentAmount"
              style="width: 90%"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="leaseUpdateSaveClick"
          >保 存</el-button
        >
        <el-button @click="leaseUpdateDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-drawer
      title="添加租赁记录"
      :visible.sync="leaseRecordDrawer"
      direction="rtl"
      :before-close="leaseRecordHandleClose"
      :with-header="false"
      size="75%"
      ref="drawer"
    >
      <div class="drawer-header">
        <div class="drawer-status">添加租赁记录</div>
      </div>
      <div class="drawer-content">
        <div class="drawer-content-left">
          <div class="drawer-content-left-title">
            <p>租赁资产</p>
            <p>总间数：{{ leasePropertyList.length }}</p>
          </div>
          <div class="add-lease-record" @click="addLeaseRecordClick">
            <i class="el-icon-plus"></i>
          </div>
          <div class="lease-list">
            <div
              class="leased-assets-item"
              v-for="(v, index) in leasePropertyList"
              :key="index"
            >
              <i
                class="el-icon-error"
                style="
                  cursor: pointer;
                  color: #f00;
                  position: absolute;
                  top: -8px;
                  left: -4px;
                  font-size: 18px;
                "
                @click="deleteHandleClick(v, index)"
              ></i>
              <div class="assets-img">
                <img
                  src="../../assets/images/operating-assets.png"
                  v-if="v.businessNature === 1"
                />

                <img
                  src="../../assets/images/non-operating-assets.png"
                  v-else-if="v.businessNature === 0"
                />
              </div>
              <div class="leased-assets-item-title">
                <p>{{ v.ownershipName }}</p>
                <p>权属</p>
              </div>
              <div class="leased-assets-item-content">
                <el-row style="padding-bottom: 15px">
                  <el-col :span="12"
                    >资产地块：<span>{{ v.propertyName }}</span></el-col
                  >
                  <!-- <el-col :span="12"
                    >所属社区：<span>{{
                      v.propertyCommunityName
                    }}</span></el-col
                  > -->
                </el-row>
                <el-row>
                  <el-col :span="8"
                    >资产类型：<span>{{ v.propertyTypeName }}</span></el-col
                  >
                  <el-col :span="8"
                    >栋号/门牌号：<span>{{
                      v.dongCode || v.doorCode
                    }}</span></el-col
                  >
                  <el-col
                    :span="8"
                    v-if="v.propertyTypeCode == 'property_type_gongyu'"
                    >租赁间数：<span>{{ v.usedNum }}间</span></el-col
                  >

                  <el-col :span="8" v-else
                    >租赁面积：<span>{{ v.leaseArea }}㎡</span></el-col
                  >
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="drawer-content-right">
          <p class="drawer-content-right-title">租赁信息</p>
          <div class="drawer-content-right-content">
            <el-row>
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>租赁性质：</p>
                  <el-radio-group v-model="leaseData.leaseNature">
                    <el-radio :label="1">有偿租赁</el-radio>
                    <el-radio :label="0">无偿使用</el-radio>
                  </el-radio-group>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="leaseData.leaseNature === 1">
              <el-col :span="20">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>租金缴纳：</p>
                  <el-table
                    :data="leaseRentList"
                    border
                    style="width: 100%; margin: 0 auto"
                  >
                    <el-table-column label="序号" width="55" align="center">
                      <template slot-scope="scope">{{
                        scope.$index + 1
                      }}</template>
                    </el-table-column>
                    <el-table-column label="租金（万元/每年）" align="center">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.rentAmount"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="上浮（%）"
                      align="center"
                      width="150px"
                    >
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.rentFloating"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="租金到期日期" align="center">
                      <template slot-scope="scope">
                        <el-date-picker
                          v-model="scope.row.payRentDate"
                          type="date"
                          placeholder="选择日期"
                          style="width: 90%"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="60px">
                      <template slot-scope="scope">
                        <i
                          class="el-icon-plus"
                          @click="addRentClick"
                          style="
                            width: 38px;
                            height: 30px;
                            text-align: center;
                            line-height: 30px;
                            cursor: pointer;
                          "
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="leaseData.leaseNature === 1">
              <el-col :span="24">
                <div
                  class="right-content-item yajin"
                  style="padding-left: 30px; margin: 15px 0"
                >
                  <p>押金情况：</p>
                  <el-table :data="leaseDepositList" border style="width: 60%">
                    <el-table-column label="序号" width="55" align="center">
                      <template slot-scope="scope">{{
                        scope.$index + 1
                      }}</template>
                    </el-table-column>
                    <el-table-column label="押金缴纳日期" align="center">
                      <template slot-scope="scope">
                        <el-date-picker
                          v-model="scope.row.payDepositDate"
                          type="date"
                          style="width: 90%"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="押金（万元）" align="center">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.depositAmount"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="leaseData.leaseNature === 1">
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>租赁合同签订日期：</p>
                  <el-date-picker
                    v-model="leaseData.leaseContractBeginDate"
                    type="date"
                    style="width: 90%"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="right-content-item">
                  <p>租赁合同终止日期：</p>
                  <el-date-picker
                    v-model="leaseData.leaseContractEndDate"
                    type="date"
                    style="width: 90%"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>使用起始日期：</p>
                  <el-date-picker
                    v-model="leaseData.leaseContractBeginDate"
                    type="date"
                    style="width: 90%"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="right-content-item">
                  <p>使用终止日期：</p>
                  <el-date-picker
                    v-model="leaseData.leaseContractEndDate"
                    type="date"
                    style="width: 90%"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>租赁说明：</p>
                  <el-input
                    v-model="leaseData.leaseInstruction"
                    type="textarea"
                    rows="3"
                    style="width: 90%"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="right-content-item">
                  <p>租赁协议：</p>
                  <el-upload
                    class="upload-demo"
                    action="/admin/common/upload"
                    :headers="headersAuthorization"
                    :on-success="
                      (response, file, fileList) =>
                        handleSuccess(response, file, fileList, 'zlxy')
                    "
                    :on-remove="
                      (file, fileList) => handleRemove(file, fileList, 'zlxy')
                    "
                    multiple
                    :limit="3"
                    :file-list="zlxyFileList"
                  >
                    <el-button size="small">上传图片/附件</el-button>
                  </el-upload>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>其他附件：</p>
                  <el-upload
                    class="upload-demo"
                    action="/admin/common/upload"
                    :headers="headersAuthorization"
                    :on-success="
                      (response, file, fileList) =>
                        handleSuccess(response, file, fileList, 'qt')
                    "
                    :on-remove="
                      (file, fileList) => handleRemove(file, fileList, 'qt')
                    "
                    multiple
                    :limit="3"
                    :file-list="qtFileList"
                  >
                    <el-button size="small">上传图片/附件</el-button>
                  </el-upload>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-if="leaseData.leaseNature === 1">
            <p class="drawer-content-right-title">评估信息</p>
            <el-row>
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>评估报告日期:</p>
                  <el-date-picker
                    v-model="leaseData.assessReportDate"
                    type="date"
                    style="width: 90%"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="right-content-item">
                  <p>评估价值时点：</p>
                  <el-date-picker
                    v-model="leaseData.assessValueDate"
                    type="date"
                    style="width: 90%"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="right-content-item" style="padding-left: 30px">
                  <p>评估价值金额（元/每月）:</p>
                  <el-input
                    v-model="leaseData.assessValueAmount"
                    style="width: 90%"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="right-content-item">
                  <p>评估报告:</p>
                  <el-upload
                    class="upload-demo"
                    action="/admin/common/upload"
                    :headers="headersAuthorization"
                    :on-success="
                      (response, file, fileList) =>
                        handleSuccess(response, file, fileList, 'pg')
                    "
                    :on-remove="
                      (file, fileList) => handleRemove(file, fileList, 'pg')
                    "
                    multiple
                    :limit="3"
                    :file-list="pgFileList"
                  >
                    <el-button size="small">上传图片/附件</el-button>
                  </el-upload>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="drawer-footer">
        <el-button type="primary" @click="addLeaseInfoClick">添 加</el-button>
        <el-button type="success" @click="leaseRecordDrawer = false"
          >取 消</el-button
        >
      </div>
    </el-drawer>

    <el-dialog
      title="添加租赁资产"
      :visible.sync="addLeaseDialogVisible"
      width="60%"
    >
      <el-table
        :data="assessmentTableData"
        border
        style="width: 95%; margin: 0 auto"
      >
        <el-table-column label="权属" align="center">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.ownershipId"
              placeholder="请选择"
              style="width: 90%"
              @change="ownershipChange"
            >
              <el-option
                v-for="item in ownershipList"
                :key="item.ownershipId"
                :label="item.ownershipName"
                :value="item.ownershipId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="资产地块" align="center">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.propertyId"
              placeholder="请选择"
              style="width: 90%"
              @change="leaseProChange"
              filterable
            >
              <el-option
                v-for="item in leaseProList"
                :key="item.propertyId"
                :label="item.propertyName"
                :value="item.propertyId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="资产类型" align="center">
          <template slot-scope="scope">
            <el-cascader
              v-model="scope.row.propertyTypeId"
              :options="leaseProTypeList"
              :show-all-levels="false"
              style="width: 90%"
              clearable
              filterable
              @change="leaseProTypeChange"
            ></el-cascader>
          </template>
        </el-table-column>
        <el-table-column
          label="栋号/门牌号"
          align="center"
          v-if="
            assessmentTableData[0].propertyTypeCode &&
            (assessmentTableData[0].propertyTypeCode ==
              'property_type_gongyu' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_bangong' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_zongheti' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_gongyechangfang' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_zhengwuyongfang' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_wenhuajiaoyu' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_yiliaoweisheng' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_yanglaoyongfang' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_shequyongfang' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_shuilijichusheshi' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_huanweisheshi' ||
              assessmentTableData[0].propertyTypeCode ==
                'property_type_chaiqianwccfangchan')
          "
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.propertyUnitId"
              placeholder="请选择"
              style="width: 90%"
              @change="propertyUnitChange"
            >
              <el-option
                v-for="item in leaseProUnitList"
                :key="item.propertyUnitId"
                :label="item.dongCode"
                :value="item.propertyUnitId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="栋号/门牌号" align="center" v-else>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.propertyUnitId"
              placeholder="请选择"
              style="width: 90%"
              @change="propertyUnitChange"
            >
              <el-option
                v-for="item in leaseProUnitList"
                :key="item.propertyUnitId"
                :label="item.doorCode"
                :value="item.propertyUnitId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="freeAreaTotal"
          label="可租面积(㎡)"
          align="center"
          v-if="
            assessmentTableData[0].propertyTypeCode &&
            assessmentTableData[0].propertyTypeCode !== 'property_type_gongyu'
          "
        >
        </el-table-column>
        <el-table-column
          label="租赁面积(㎡)"
          align="center"
          v-if="
            assessmentTableData[0].propertyTypeCode &&
            assessmentTableData[0].propertyTypeCode !== 'property_type_gongyu'
          "
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.leaseArea"
              @change="leaseAreaChange"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="套型"
          align="center"
          v-if="
            assessmentTableData[0].propertyTypeCode &&
            assessmentTableData[0].propertyTypeCode === 'property_type_gongyu'
          "
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.suiteId"
              placeholder="请选择"
              style="width: 90%"
              @change="suiteIdChange"
            >
              <el-option
                v-for="item in suiteList"
                :key="item.suiteId"
                :label="item.suiteType"
                :value="item.suiteId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="freeSuiteNum"
          label="可租间数"
          align="center"
          v-if="
            assessmentTableData[0].propertyTypeCode &&
            assessmentTableData[0].propertyTypeCode == 'property_type_gongyu'
          "
        >
        </el-table-column>

        <el-table-column
          label="租赁间数"
          align="center"
          v-if="
            assessmentTableData[0].propertyTypeCode &&
            assessmentTableData[0].propertyTypeCode == 'property_type_gongyu'
          "
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.usedNum"
              @change="suiteNumChange"
              @input="handleEdit"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveClick" :disabled="disabledBtn"
          >保 存</el-button
        >
        <el-button @click="addLeaseDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="archivingForm.archivingType === 1 ? '到期归档' : '提前归档'"
      :visible.sync="archiveDialogVisible"
      width="50%"
      center
    >
      <div class="archive">
        <div class="title">租金缴纳情况</div>
        <el-table
          :data="leaseRentTableData"
          border
          style="width: 90%; margin: 10px auto"
        >
          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="rentAmount"
            label="租金（万元/每年）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="rentFloating"
            label="上浮（%） "
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payRentDate"
            label="租金到期日期"
            align="center"
          >
          </el-table-column>

          <el-table-column label="缴租情况 " align="center">
            <template slot-scope="scope">
              <div class="archive-status">
                <span v-if="scope.row.rentPayFlag === 1">是</span>
                <span v-else>否</span>
                <div
                  class="archive-status-img"
                  v-if="scope.row.rentPayFlag === 0"
                >
                  <img src="../../assets/screen/screen-sign.png" alt="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="缴租日期 " align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.W5">{{ scope.row.rentPayDate }}</span>
              <span v-else style="color: #f00">——</span>
            </template>
          </el-table-column>
          <el-table-column label="实缴租金（万元） " align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.payRentAmount">{{
                scope.row.payRentAmount
              }}</span>
              <span v-else style="color: #f00">——</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="title">押金缴纳情况</div>
        <el-table
          :data="leaseDepositTableData"
          border
          style="width: 50%; margin: 10px 5%"
        >
          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="payDepositDate"
            label="押金缴纳日期"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="depositAmount"
            label="押金（万元） "
            align="center"
          ></el-table-column>
        </el-table>
        <div class="title">押金退还记录</div>
        <div class="record">
          <div class="record-left">
            <div class="record-item">
              <p>押金退还日期:</p>
              <el-date-picker
                v-model="archivingForm.depositRefundDate"
                type="date"
                style="width: 80%"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <div class="record-item">
              <p>实退押金（万元）:</p>
              <el-input
                v-model="archivingForm.depositRefundAmount"
                style="width: 80%"
              ></el-input>
            </div>
            <div class="record-item">
              <p>其他附件:</p>
              <el-upload
                class="upload-demo"
                action="/admin/common/upload"
                :headers="headersAuthorization"
                :on-success="
                  (response, file, fileList) =>
                    handleSuccess(response, file, fileList, 'dqqt')
                "
                :on-remove="
                  (file, fileList) => handleRemove(file, fileList, 'dqqt')
                "
                multiple
                :limit="3"
                :file-list="dqqtFileList"
              >
                <el-button size="small">上传图片/附件</el-button>
              </el-upload>
            </div>
          </div>
          <div class="record-right">
            <div class="record-item">
              <p>退还说明:</p>
              <el-input
                v-model="archivingForm.depositRefundInstruction"
                type="textarea"
                :rows="4"
                style="width: 90%"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="archiveSaveClick">保 存</el-button>
        <el-button @click="archiveDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  detailBasePropertyUnit,
  leaseListPropertyUnit,
  archivingLease,
  delLease,
  leaseHistoryPropertyUnit,
} from "@/api/shops";

import {
  propertyOwnList,
  leasePropertyList,
  leasePropertyTypeList,
  leasePropertyUnitList,
  leaseSuiteList,
  delLeaseInfo,
  addleaseInfo,
  editleaseInfo,
  archivingleaseInfo,
  leaseBaseInfo,
  leaseInfoList,
  leaseRentBatch,
  delLeaseProperty,
} from "@/api/tenant";
export default {
  components: {},
  data() {
    return {
      /**start 添加租赁资产 */
      ownershipList: [], //权属
      leaseProList: [], // 资产地块
      leaseProTypeList: [], // 资产类型
      leaseProUnitList: [], // 资产单元
      leasePropertyTypeArr: [],
      suiteList: [], //公寓套型
      /**end 添加租赁资产 */
      // 请求头
      headersAuthorization: null,
      zlxyFileList: [], // 租赁协议list
      qtFileList: [], // 其他list
      pgFileList: [], // 评估报告list
      gdFileList: [], //归档押金list
      dqqtFileList: [], //到期其他list
      // 详情信息
      leaseDetailInfo: null,
      baseInfo: null,
      leaseBaseInfoList: [], // 租赁基础信息
      archivingForm: {
        leaseId: undefined,
        archivingStatus: 1,
        depositRefundDate: "",
        depositRefundAmount: undefined,
        depositRefundInstruction: undefined,
        depositRefundAttachIds: "",
      }, //归档信息

      // 新增租赁信息
      leaseData: {
        leaseUserId: undefined,
        assessmentId: undefined, // 仅限公寓
        propertyUnitId: undefined,
        leaseContractCode: undefined,
        leaseNature: 1,
        leaseName: undefined,
        lesseeContact: undefined,
        leaseContractAttachIds: undefined,
        leaseInstruction: undefined,
        leaseArea: undefined,
        leaseContractBeginDate: undefined,
        leaseContractEndDate: undefined,
        assessReportDate: undefined,
        assessValueDate: undefined,
        assessValueAmount: undefined,
        otherAttachIds: undefined,
      },
      leasePropertyList: [], //租赁资产列表
      leaseRentList: [
        {
          payRentDate: "",
          rentPayFlag: undefined,
          rentPayDate: "",
          rentAmount: undefined,
          rentFloating: undefined,
        },
      ], // 租赁租金信息
      leaseDepositList: [
        {
          payDepositDate: "",
          depositAmount: undefined,
        },
      ], // 租赁押金信息
      assessmentList: [],
      leaseDepositTableData: [],
      leaseRentTableData: [],
      form: {},
      archiveDialogVisible: false, // 到期提醒
      leaseRentUpdateList: [], // 租金缴纳更新
      leaseOptions: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],
      propertyinfoStorage: null,
      leaseDrawer: false,
      bgShopsDrawer: false,
      historyDrawer: false,
      leaseInfo: null,
      propertyObj: null,
      fileDialogVisible: false,
      depositList: [],
      depositForm: {
        archivingStatus: 0,
        depositRefundAmount: "",
        depositRefundDate: "",
        depositRefundAttachIds: "",
        depositRefundInstruction: "",
      },
      archivingOption: [
        {
          label: "未归档",
          value: 0,
        },
        {
          label: "已归档",
          value: 1,
        },
      ],
      historyList: [],
      leaseUpdateDialogVisible: false,
      leaseRecordDrawer: false,

      assessmentTableData: [
        {
          ownershipId: undefined,
          ownershipName: undefined, // 权属名称
          propertyId: undefined,
          propertyName: undefined, // 地块名称
          propertyCommunityName: undefined, //所属地块
          propertyTypeId: undefined,
          propertyTypeName: undefined, // 资产类型名称
          propertyTypeCode: undefined,
          businessNature: undefined, // 经营性质
          propertyUnitId: undefined,
          doorCode: undefined, // 门牌号
          dongCode: undefined, //栋号
          freeAreaTotal: undefined, // 控制面积
          leaseArea: undefined,
          suiteId: undefined,
          usedNum: undefined,
          freeNum: undefined,
          freeSuiteNum: undefined,
        },
      ],
      fileList: [],
      addLeaseDialogVisible: false,
      disabledBtn: false,
      flag: false,
      copyFreeSuiteNum: undefined,
    };
  },
  mounted() {
    // 获取首页路由传参信息
    this.leaseDetailInfo = Object.assign({}, this.$route.query);
    // 基础信息
    this.getLeaseBaseInfo();
    // 租赁信息
    this.getLeaseInfoList();
    this.init();
  },
  computed: {
    permissions() {
      return this.$store.getters.permissions
    }
  },
  methods: {
    init() {
      // 获取用于上传的token
      this.headersAuthorization = {
        Authorization: "Bearer " + getToken(),
      };
    },

    // 在 Input 值改变时触发
    handleEdit(e) {
      let value = e.replace(/[^\d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(\d{15})\d*/, "$1"); // 最多保留15位整数

      let info = this.assessmentTableData[0].usedNum;

      console.log("测试", info, value);

      if (value) {
        this.assessmentTableData[0].usedNum = value;
      }
      // else {
      //   this.assessmentTableData[0].usedNum = info;
      // }
    },

    // 基础信息
    getLeaseBaseInfo() {
      leaseBaseInfo(this.leaseDetailInfo.leaseUserId).then((res) => {
        if (res.code == 200) {
          this.baseInfo = res.data;
        }
      });
    },

    // 租赁信息
    getLeaseInfoList() {
      leaseInfoList(this.leaseDetailInfo.leaseUserId).then((res) => {
        if (res.code == 200) {
          this.leaseBaseInfoList = res.data;
        }
      });
    },
    getTotalArea(item) {
      if (item.leasePropertyList && item.leasePropertyList.length > 0) {
        let total = item.leasePropertyList
          .map((v) => v.leaseArea)
          .reduce((pre, next) => pre + next);
        if (total) {
          return total.toFixed(2);
        }
      }
    },

    /***start 添加租赁资产 */
    ownershipChange(val) {
      // 识别修改了权属
      this.assessmentTableData[0].propertyId = undefined;
      this.assessmentTableData[0].propertyName = undefined;
      this.assessmentTableData[0].propertyCommunityName = undefined;
      this.assessmentTableData[0].propertyTypeId = undefined;
      this.assessmentTableData[0].propertyTypeName = undefined;
      this.assessmentTableData[0].propertyTypeCode = undefined;
      this.assessmentTableData[0].businessNature = undefined;
      this.assessmentTableData[0].propertyUnitId = undefined;
      this.assessmentTableData[0].doorCode = undefined;
      this.assessmentTableData[0].dongCode = undefined;
      this.assessmentTableData[0].freeAreaTotal = undefined;
      this.assessmentTableData[0].leaseArea = undefined;
      this.assessmentTableData[0].suiteId = undefined;
      this.assessmentTableData[0].usedNum = undefined;
      this.assessmentTableData[0].freeNum = undefined;
      this.assessmentTableData[0].freeSuiteNum = undefined;

      // 获取权属name
      if (this.ownershipList && this.ownershipList.length > 0) {
        this.assessmentTableData[0].ownershipName = this.ownershipList.filter(
          (v) => v.ownershipId === val
        )[0].ownershipName;
      }
      this.disabledBtn = false;
      this.getLeasePropertyList(val);
    },

    // 所属单位
    getPropertyOwnList() {
      propertyOwnList().then((res) => {
        if (res.code == 200) {
          this.ownershipList = res.data;
        }
      });
    },
    leaseProChange(val) {
      // 获取资产地块name
      this.assessmentTableData[0].propertyCommunityName = undefined;
      this.assessmentTableData[0].propertyTypeId = undefined;
      this.assessmentTableData[0].propertyTypeName = undefined;
      this.assessmentTableData[0].propertyTypeCode = undefined;
      this.assessmentTableData[0].businessNature = undefined;
      this.assessmentTableData[0].propertyUnitId = undefined;
      this.assessmentTableData[0].doorCode = undefined;
      this.assessmentTableData[0].dongCode = undefined;
      this.assessmentTableData[0].freeAreaTotal = undefined;
      this.assessmentTableData[0].leaseArea = undefined;
      this.assessmentTableData[0].suiteId = undefined;
      this.assessmentTableData[0].usedNum = undefined;
      this.assessmentTableData[0].freeNum = undefined;
      this.assessmentTableData[0].freeSuiteNum = undefined;

      if (this.leaseProList && this.leaseProList.length > 0) {
        let target = this.leaseProList.filter((v) => v.propertyId === val);
        if (target && target.length > 0) {
          this.assessmentTableData[0].propertyName = target[0].propertyName;
        }
      }
      this.disabledBtn = false;

      this.getLeasePropertyTypeList(val);
    },
    // 资产地块下拉列表
    getLeasePropertyList(ownershipId) {
      let params = { ownershipId: ownershipId };
      leasePropertyList(params).then((res) => {
        if (res.code == 200) {
          this.leaseProList = res.data;
        }
      });
    },

    leaseProTypeChange(val) {
      this.assessmentTableData[0].propertyCommunityName = undefined;
      this.assessmentTableData[0].propertyUnitId = undefined;
      this.assessmentTableData[0].doorCode = undefined;
      this.assessmentTableData[0].dongCode = undefined;
      this.assessmentTableData[0].freeAreaTotal = undefined;
      this.assessmentTableData[0].leaseArea = undefined;
      this.assessmentTableData[0].suiteId = undefined;
      this.assessmentTableData[0].usedNum = undefined;
      this.assessmentTableData[0].freeNum = undefined;
      this.assessmentTableData[0].freeSuiteNum = undefined;

      if (this.leasePropertyTypeArr && this.leasePropertyTypeArr.length > 0) {
        let target = this.leasePropertyTypeArr.filter(
          (v) => v.propertyTypeId == val[1]
        );
        if (target && target.length > 0) {
          this.assessmentTableData[0].propertyTypeId = target[0].propertyTypeId;
          this.assessmentTableData[0].propertyTypeName =
            target[0].propertyTypeName;
          this.assessmentTableData[0].propertyTypeCode =
            target[0].propertyTypeCode;
          this.assessmentTableData[0].businessNature = val[0]; //经营性质
        }
      }

      if (val && val.length > 1) {
        this.getLeasePropertyUnitList(val[1]);
      }
      this.disabledBtn = false;
    },
    // 栋号/门牌号change
    propertyUnitChange(val) {
      let target = this.leaseProUnitList.filter((v) => v.propertyUnitId == val);
      if (target && target.length > 0) {
        if (target[0].doorCode) {
          this.assessmentTableData[0].doorCode = target[0].doorCode;
        }
        if (target[0].dongCode) {
          this.assessmentTableData[0].dongCode = target[0].dongCode;
        }
        this.assessmentTableData[0].freeAreaTotal = target[0].freeAreaTotal;
      }
      if (
        this.assessmentTableData[0].propertyTypeCode === "property_type_gongyu"
      ) {
        this.getLeaseSuiteList(val);
      }
      this.disabledBtn = false;
    },
    getLeasePropertyTypeList(propertyId) {
      let params = { propertyId: propertyId };
      leasePropertyTypeList(params).then((res) => {
        if (res.code == 200) {
          this.leasePropertyTypeArr = res.data;
          if (
            this.leasePropertyTypeArr &&
            this.leasePropertyTypeArr.length > 0
          ) {
            let target = this.leasePropertyTypeArr
              .filter((v) => v.businessNature === 1)
              .map((j) => {
                return {
                  label: j.propertyTypeName,
                  value: j.propertyTypeId,
                  businessNature: j.businessNature,
                };
              });

            let no_target = this.leasePropertyTypeArr
              .filter((v) => v.businessNature === 0)
              .map((j) => {
                return {
                  label: j.propertyTypeName,
                  value: j.propertyTypeId,
                  businessNature: j.businessNature,
                };
              });

            this.leaseProTypeList = [
              {
                value: 1,
                label: "经营性",
                children: target,
              },
              {
                value: 0,
                label: "非经营性",
                children: no_target,
              },
            ];
          }
        }
      });
    },

    getLeasePropertyUnitList(propertyTypeId) {
      let params = {
        propertyTypeId: propertyTypeId,
      };
      leasePropertyUnitList(params).then((res) => {
        if (res.code == 200) {
          this.leaseProUnitList = res.data;
          // 获取可租面积
          if (this.leaseProUnitList && this.leaseProUnitList.length > 0) {
            this.assessmentTableData[0].freeAreaTotal =
              this.leaseProUnitList.filter(
                (v) => v.propertyTypeId === propertyTypeId
              )[0].freeAreaTotal;
          }
        }
      });
    },

    // 新增租赁评估信息
    addLeaseInfoClick() {
      if (this.leaseData.leaseId) {
        this.leaseData.leasePropertyList = [...this.leasePropertyList];
        let params = Object.assign({}, this.leaseData);
        editleaseInfo(params).then((res) => {
          if (res.code == 200) {
            this.$message.success("编辑成功");
            this.leaseRecordDrawer = false;
            this.getLeaseInfoList();
          }
        });
      } else {
        let params = Object.assign({}, this.leaseData);
        params.leaseUserId = this.$route.query.leaseUserId;
        params.leaseRentList =
          params.leaseNature === 1 ? this.leaseRentList : [];
        params.leaseDepositList = this.leaseDepositList;
        params.leasePropertyList = [...this.leasePropertyList];
        addleaseInfo(params).then((res) => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            this.leaseRecordDrawer = false;
            this.getLeaseInfoList();
          }
        });
      }
    },

    // 删除租赁评估信息
    delLeaseClick(row) {
      delLeaseInfo(row.leaseId)
        .then((res) => {
          this.$message.success("删除成功");
          this.getLeaseInfoList();
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },

    // 编辑租赁评估信息
    editLeaseClick(item) {
      this.leaseData = Object.assign({}, item);
      this.leaseRentList = this.leaseData.leaseRentList;
      this.leaseDepositList = this.leaseData.leaseDepositList;
      if (
        this.leaseData.leasePropertyList &&
        this.leaseData.leasePropertyList.length > 0
      ) {
        this.leasePropertyList = JSON.parse(
          JSON.stringify(this.leaseData.leasePropertyList)
        );
      }
      // 其他附件
      if (
        this.leaseData.otherAttachList &&
        this.leaseData.otherAttachList.length > 0
      ) {
        this.qtFileList = this.leaseData.otherAttachList.map((v) => {
          return {
            name: v.originalAttName,
            url: v.attUrl,
          };
        });
      }

      // 租赁协议
      if (
        this.leaseData.leaseContractAttachList &&
        this.leaseData.leaseContractAttachList.length > 0
      ) {
        this.zlxyFileList = this.leaseData.leaseContractAttachList.map((v) => {
          return {
            name: v.originalAttName,
            url: v.attUrl,
          };
        });
      }

      // 评估报告
      if (
        this.leaseData.assessReportAttachList &&
        this.leaseData.assessReportAttachList.length > 0
      ) {
        this.pgFileList = this.leaseData.assessReportAttachList.map((v) => {
          return {
            name: v.originalAttName,
            url: v.attUrl,
          };
        });
      }
      this.leaseRecordDrawer = true;
    },

    // 归档
    fileLeaseClick(row) {
      this.fileDialogVisible = true;
      this.depositForm.leaseId = row.leaseId;
    },

    /***end 添加租赁资产 */

    /**start 添加租赁资产 */
    leaseAreaChange(val) {
      if (this.assessmentTableData[0].freeAreaTotal < val) {
        this.$message.error("租赁面积超出可租面积");
        this.disabledBtn = true;
      } else {
        this.disabledBtn = false;
      }
    },
    // 公寓选择套型
    suiteIdChange(val) {
      let target = this.suiteList.filter((v) => v.suiteId === val);
      if (target && target.length > 0) {
        this.assessmentTableData[0].freeSuiteNum = target[0].freeSuiteNum;
      }
    },
    // 判断套型数量是否超过当前
    suiteNumChange(val) {
      if (this.assessmentTableData[0].freeSuiteNum < val) {
        this.$message.error("租赁间数超出可租间数");
        this.disabledBtn = true;
      } else {
        this.copyFreeSuitInfo = JSON.parse(
          JSON.stringify(this.assessmentTableData)
        );



        console.log("val", val, this.copyFreeSuitInfo);
        if (val > 0) {
          this.assessmentTableData[0].freeSuiteNum =
            this.assessmentTableData[0].freeSuiteNum - val;
        } else {
          console.log('进入');
          this.assessmentTableData[0].freeSuiteNum =
            this.copyFreeSuitInfo[0].freeSuiteNum;
        }

        this.disabledBtn = false;
      }
    },
    saveClick() {
      if (!this.assessmentTableData[0].ownershipId) {
        this.$message.error("请选择权属");
        return;
      }

      if (!this.assessmentTableData[0].propertyId) {
        this.$message.error("请选择资产地块");
        return;
      }

      if (!this.assessmentTableData[0].propertyTypeId) {
        this.$message.error("请选择资产类型");
        return;
      }

      if (
        this.assessmentTableData[0].propertyTypeCode &&
        this.assessmentTableData[0].propertyTypeCode !== "property_type_gongyu"
      ) {
        if (!this.assessmentTableData[0].leaseArea) {
          this.$message.error("请输入租赁面积");
          return;
        }
      }

      let leaseInfo = Object.assign({}, this.assessmentTableData[0]);

      if (this.leasePropertyList.length > 0) {
        if (
          this.leasePropertyList[0].propertyTypeCode !=
          leaseInfo.propertyTypeCode
        ) {
          this.$message.error("请选择相同的资产类型");
          return;
        }
      }

      this.leasePropertyList.push(leaseInfo);
      this.addLeaseDialogVisible = false;

      this.assessmentTableData[0].ownershipId = undefined;
      this.assessmentTableData[0].propertyId = undefined;
      this.assessmentTableData[0].propertyCommunityName = undefined;
      this.assessmentTableData[0].propertyTypeId = undefined;
      this.assessmentTableData[0].propertyTypeName = undefined;
      this.assessmentTableData[0].propertyTypeCode = undefined;
      this.assessmentTableData[0].businessNature = undefined;
      this.assessmentTableData[0].propertyUnitId = undefined;
      this.assessmentTableData[0].doorCode = undefined;
      this.assessmentTableData[0].dongCode = undefined;
      this.assessmentTableData[0].freeAreaTotal = undefined;
      this.assessmentTableData[0].leaseArea = undefined;
      this.assessmentTableData[0].suiteId = undefined;
      this.assessmentTableData[0].usedNum = undefined;
      this.assessmentTableData[0].freeNum = undefined;
      this.assessmentTableData[0].freeSuiteNum = undefined;
    },
    // 套型list
    getLeaseSuiteList(propertyUnitId) {
      let params = {
        propertyUnitId: propertyUnitId,
      };
      leaseSuiteList(params).then((res) => {
        if (res.code == 200) {
          this.suiteList = res.data;
        }
      });
    },
    /**end 添加租赁资产 */

    /***start 新增租赁记录 */

    // 新增租金单行
    addRentClick() {
      let target = [...this.leaseRentList];
      if (target.length > 0) {
        target.forEach((v) => {
          if (v.rentAmount && v.rentFloating && v.payRentDate) {
            this.flag = false;
          } else {
            this.flag = true;
          }
        });

        if (this.flag) {
          this.$message.error("租金缴纳信息存在空，请填写完整");
        } else {
          this.leaseRentList.push({
            payRentDate: "",
            rentPayFlag: undefined,
            rentPayDate: "",
            rentAmount: undefined,
            rentFloating: undefined,
          });
        }
      }
    },

    /***end 新增租赁记录 */

    /***start 上传文件 */

    handleSuccess(res, file, fileList, type) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }
      let target = fileList.map((item) => item.response.data.attId);
      if (type == "zlxy") {
        if (target.length > 0) {
          this.leaseData.leaseContractAttachIds = target.join(",");
        }
      } else if (type == "qt") {
        if (target.length > 0) {
          this.leaseData.otherAttachIds = target.join(",");
        }
      } else if (type == "pg") {
        if (target.length > 0) {
          this.leaseData.assessReportAttachIds = target.join(",");
        }
      } else if (type == "gd") {
        if (target.length > 0) {
          this.archivingForm.depositRefundAttachIds = target.join(",");
        }
      }
    },
    handleRemove(file, fileList, type) {
      let target = fileList.map((item) => item.response.data.attId);
      if (type == "zlxy") {
        if (target.length > 0) {
          this.leaseData.leaseContractAttachIds = target.join(",");
        } else {
          this.leaseData.leaseContractAttachIds = "";
        }
      } else if (type == "qt") {
        if (target.length > 0) {
          this.leaseData.otherAttachIds = target.join(",");
        } else {
          this.leaseData.otherAttachIds = "";
        }
      } else if (type == "pg") {
        if (target.length > 0) {
          this.leaseData.assessReportAttachIds = target.join(",");
        } else {
          this.leaseData.assessReportAttachIds = "";
        }
      } else if (type == "gd") {
        if (target.length > 0) {
          this.archivingForm.depositRefundAttachIds = target.join(",");
        } else {
          this.archivingForm.depositRefundAttachIds = "";
        }
      }
    },
    /***end 上传文件 */

    /***start 归档 */
    archiveSaveClick() {
      let params = this.archivingForm;
      archivingleaseInfo(params).then((res) => {
        if (res.code == 200) {
          this.archiveDialogVisible = false;
          this.$message.success("归档成功");
          this.getLeaseInfoList();
        }
      });
    },
    /***end 归档 */

    // 关闭租赁记录
    leaseRecordHandleClose() {},

    /**下载文件（权证） */
    downloadClick(url) {
      const a = document.createElement("a"); // 创建一个HTML 元素
      a.setAttribute("download", ""); //download属性
      a.setAttribute("href", url); // href链接
      a.setAttribute("target", "_blank");
      a.click(); // 自执行点击事件
    },
    backClick() {
      history.go(-1);
    },
    // 到期归档
    expireClick(item, archivingType) {
      this.archivingForm.leaseId = item.leaseId;
      this.archivingForm.archivingType = archivingType;
      //租金缴纳情况
      this.leaseRentTableData = item.leaseRentList;
      //租金缴纳情况
      this.leaseDepositTableData = item.leaseDepositList;
      this.archiveDialogVisible = true;
    },
    // 添加租户
    addLeaseClick() {
      this.leaseRecordDrawer = true;
    },
    // 更新
    updateClick(item) {
      this.leaseRentUpdateList = [...item.leaseRentList];
      this.leaseUpdateDialogVisible = true;
    },

    //更新保存
    leaseUpdateSaveClick() {
      leaseRentBatch(this.leaseRentUpdateList).then((res) => {
        if (res.code == 200) {
          this.$message.success("更新成功");
          this.leaseUpdateDialogVisible = false;
          this.getLeaseInfoList();
        }
      });
    },
    // 历史记录
    historyClick() {
      this.$router.push({
        path: "/tenants/leaseTenantDetailsHistory",
        query: {
          leaseUserId: this.leaseDetailInfo.leaseUserId,
          leaseUserName: this.leaseDetailInfo.leaseUserName,
        },
      });
    },
    // 添加租赁资产
    addLeaseRecordClick() {
      this.addLeaseDialogVisible = true;
      this.getPropertyOwnList();
    },

    // 删除租赁资产
    deleteHandleClick(v, index) {
      if (v.leasePropertyId) {
        // 编辑删除
        delLeaseProperty(v.leasePropertyId).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            // 租赁信息
            this.leasePropertyList.splice(index, 1);
            // 租赁信息
            this.getLeaseInfoList();
          }
        });
      } else {
        this.leasePropertyList.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.shops-detail {
  .path {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: rgba($color: #fff, $alpha: 0.2);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0px 0px;
    padding-left: 12px;
    span {
      font-weight: 600;
    }
  }
  .shops-detail-content {
    width: 98.5%;
    height: calc(100vh - 90px);
    margin: 15px auto 0;
    background: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px 6px 6px 6px;
    overflow-y: auto;
    .content-name {
      width: 98%;
      height: 60px;
      line-height: 60px;
      margin: 10px auto 17px;
      display: flex;
      align-items: center;
      .el-icon-arrow-left {
        width: 86px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-right: 1px solid #e7e7e7;
        font-size: 36px;
        cursor: pointer;
      }
      .name {
        font-size: 28px;
        height: 30px;
        line-height: 30px;
        border-left: 4px solid #0052d9;
        margin-left: 16px;
        padding-left: 16px;
        position: relative;
        .line {
          border-left: 4px solid #ffc522;
          height: 12px;
          position: absolute;
          left: -4px;
          top: 0;
        }
      }
    }
    .content-info-top {
      width: 95%;
      margin: 0 auto 15px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px 6px 6px 6px;
      .info-top-content {
        display: flex;

        .top-content-left {
          display: flex;
          flex-flow: wrap;
          margin-left: 50px;
          margin-top: 15px;
          width: 90%;
          .top-content-left-item {
            width: 22%;
            padding-bottom: 25px;
          }
        }
      }
    }
    .content-info-bottom {
      width: 95%;
      margin: 0 auto 15px;
      .lease-info {
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px 8px 8px 8px;
      }
      .no-lease-active {
        background: #ffeddb !important;
        color: #f1902b !important;
      }
      .info-bottom-content-tips {
        width: 100%;
        height: 48px;
        background: #d4e5ff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #0052d9;
        border-radius: 8px 8px 0 0;
        .info-bottom-content-time {
          font-size: 24px;
          padding-left: 35px;
        }
        .info-bottom-content-opt {
          display: flex;
          padding-right: 15px;
        }
      }
      .content-info-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .content-info-bottom-left {
        display: flex;
        align-items: center;
      }
      .left-button {
        @include searchBtn;
        font-size: 14px;
        border-radius: 4px;
        width: 120px;
        height: 28px;
        line-height: 28px;
        margin-left: 40px;
      }
      .content-info-bottom-right {
        display: flex;
        justify-content: flex-end;
        .left-button {
          @include searchBtn;
          font-size: 14px;
          border-radius: 4px;
          width: 100px;
        }
      }
    }

    .title {
      display: flex;
      align-items: center;
      padding-left: 24px;
      color: #000;
      font-size: 18px;
      img {
        height: 30px;
        width: 30px;
      }
    }
  }
  .opt-active {
    color: #f1902b !important;
  }
  .opt {
    padding-left: 26px;
    color: #0052d9;
    cursor: pointer;
    span {
      font-size: 12px;
      padding-left: 3px;
    }
  }
  .info-bottom-content {
    height: auto;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
    // border: 1px solid #dcdcdc;
    display: flex;
    position: relative;
    margin-bottom: 16px;
    .title {
      display: flex;
      align-items: center;
      .info-title {
        border-left: 4px solid #0052d9;
        margin-top: 20px;
        padding-left: 5px;
        padding-right: 5px;
      }
      .area {
        font-size: 14px;
        color: #88909b;
        margin-top: 15px;
        padding: 0 10px;
      }
      .line {
        flex: 1;
        border: 1px solid #f3f2f2;
        margin-top: 15px;
      }
    }

    .leased-assets {
      display: flex;
      flex-wrap: wrap;
      margin-left: 1%;
      margin-top: 15px;
      .leased-assets-item {
        width: 22%;
        height: 125px;
        background: #ffffff;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px 8px 8px 8px;
        margin-right: 3%;
        margin-bottom: 15px;
        position: relative;
        .assets-img {
          width: 80px;
          height: 63px;
          position: absolute;
          bottom: 5px;
          right: 0;
          img {
            width: 100%;
          }
        }
        .leased-assets-item-title {
          display: flex;
          padding-left: 5px;
          p {
            &:nth-child(1) {
              font-size: 18px;
              color: #505a69;
            }
            &:nth-child(2) {
              width: 40px;
              height: 19px;
              text-align: center;
              line-height: 19px;
              font-size: 12px;
              color: #0064c8;
              background: #e5f2ff;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #0064c8;
              margin-top: 18px;
              margin-left: 15px;
            }
          }
        }
        .leased-assets-item-content {
          font-size: 12px;
          color: #505a69;
          padding: 5px;
          span {
            color: #000;
            font-weight: 600;
          }
        }
      }
    }
    .info-bottom-content-left {
      width: 100%;
    }
    .jy-lease-info {
      .no-lease {
        margin-top: 15px;
        margin-left: 25px;
        .info-left-item {
          padding-bottom: 25px;
        }
      }
      .info {
        display: flex;
        justify-content: space-between;
        .info-left-item {
          padding-bottom: 25px;
        }
        .info-left {
          width: 20%;
          margin-left: 29px;
          margin-top: 32px;
          margin-right: 15px;
        }
        .info-middle {
          width: 40%;
          margin-top: 18px;
          .info-middle-table {
            display: flex;
          }
          .update-btn {
            float: right;
            margin-top: 10px;
          }
        }

        .info-right {
          width: 30%;
          margin-left: 29px;
          margin-top: 8px;
          margin-right: 15px;
          .info-left-table {
            display: flex;
          }
        }
      }
    }
    .jy-assessment-info {
      .info {
        padding-bottom: 25px;
        .info-left {
          margin-left: 29px;
          margin-top: 32px;
          margin-right: 15px;
          .info-left-item {
            padding-bottom: 15px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.shops-detail {
  .el-table td {
    padding: 5px 0;
  }
  .el-drawer.btt {
    overflow-y: auto;
  }
  .el-button--text {
    color: #0052d9;
  }

  .opt-active {
    .el-button--text {
      color: #f1902b;
    }
  }

  .el-dialog {
    border-radius: 4px;
    .el-dialog__header {
      text-align: left !important;
    }
  }
  .el-table--border::after {
    background-color: transparent;
  }

  .drawer-header {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: #fafafa;
    display: flex;
    align-items: center;
    .drawer-status {
      color: #000;
      font-size: 16px;
      padding-left: 23px;
    }
  }

  .drawer-content {
    display: flex;
    justify-content: space-around;
    margin: 2.5vh 2% 0 2%;
    height: calc(86vh);
    .drawer-content-left {
      width: 35%;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdcdc;
      background: #fafafa;
      overflow: auto;
      .drawer-content-left-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
        p {
          color: #000000;
          &:nth-child(1) {
            font-size: 18px;
            border-left: 6px solid #0052d9;
            padding-left: 5px;
          }
          &:nth-child(2) {
            font-size: 14px;
          }
        }
      }
      .add-lease-record {
        width: 90%;
        height: 70px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 2px dotted #dcdcdc;
        cursor: pointer;
        .el-icon-plus {
          width: 100%;
          font-size: 32px;
          text-align: center;
          line-height: 70px;
          color: #d9d9d9;
        }
      }
      .lease-list {
        width: 90%;
        margin: 16px auto;
        .leased-assets-item {
          width: 100%;
          height: 125px;
          background: #ffffff;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 8px 8px 8px 8px;
          margin-right: 3%;
          margin-bottom: 15px;
          position: relative;
          padding: 0 10px;
          .assets-img {
            width: 80px;
            height: 63px;
            position: absolute;
            bottom: 5px;
            right: 0;
            img {
              width: 100%;
            }
          }
          .leased-assets-item-title {
            display: flex;
            padding-left: 5px;
            p {
              &:nth-child(1) {
                font-size: 18px;
                color: #505a69;
              }
              &:nth-child(2) {
                width: 40px;
                height: 19px;
                text-align: center;
                line-height: 19px;
                font-size: 12px;
                color: #0064c8;
                background: #e5f2ff;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #0064c8;
                margin-top: 18px;
                margin-left: 15px;
              }
            }
          }
          .leased-assets-item-content {
            font-size: 12px;
            color: #505a69;
            padding: 5px;
            span {
              color: #000;
              font-weight: 600;
            }
          }
        }
      }
    }
    .drawer-content-right {
      width: 62%;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdcdc;
      overflow-y: auto;
      padding-bottom: 15px;
      .drawer-content-right-title {
        font-size: 18px;
        border-left: 6px solid #0052d9;
        padding-left: 5px;
        margin-left: 15px;
      }
      .drawer-content-right-content {
        width: 100%;
      }
      .el-radio-group {
        padding-top: 15px;
      }
      .el-col-12 {
        margin-bottom: 15px;
      }
      .right-content-item {
        p {
          margin: 10px 0;
        }
        .el-table--border {
          border-right: 1px solid #dfe6ec !important;
          border-left: 1px solid #dfe6ec !important;
          border-top: 1px solid #dfe6ec !important;
        }
      }
      .yajin {
        .el-table--border {
          border-right: none !important;
        }
      }
    }
  }
  .drawer-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    margin-right: 35px;
    .el-button--primary {
      background-color: #0052d9;
      border-color: #0052d9;
      width: 95px;
      height: 32px;
      line-height: 8px;
    }
    .el-button--success {
      border: 1px solid #0052d9;
      background-color: #fff;
      color: #0052d9;
      width: 95px;
      height: 32px;
      line-height: 8px;
    }
  }

  .archive {
    .el-dialog__header {
      text-align: left;
    }
    .title {
      font-size: 16px;
      color: #000000;
      border-left: 6px solid #0052d9;
      margin-top: 5px;
      margin-left: 20px;
      padding-left: 5px;
    }
    .record {
      width: 90%;
      margin: 10px auto 0;
      display: flex;
      .record-left {
        width: 40%;
      }
      .record-right {
        width: 60%;
      }
      .record-item {
        p {
          margin: 5px 0;
        }
      }
    }
    .el-dialog--center .el-dialog__footer {
      padding-top: 20px !important;
    }
    .el-table tr {
      position: relative;
    }
    .archive-status {
      .archive-status-img {
        width: 80px;
        position: absolute;
        bottom: -26px;
        right: 0;
        img {
          width: 100%;
        }
      }
    }
  }
}

.file {
  display: flex;
  justify-content: space-around;
  .expired-file {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #409eff;
    font-size: 15px;
    color: #409eff;
    cursor: pointer;
  }
  .advance-file {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #f1902b;
    font-size: 15px;
    color: #f1902b;
    cursor: pointer;
  }
}
</style>
